<script lang="ts" setup>
import { ref, reactive, watch } from "vue"
import { Search, Refresh } from "@element-plus/icons-vue"
import { type FormInstance, type FormRules, ElMessage } from "element-plus"
import { formatDateTime } from "@/utils/index"
import { usePagination } from "@/hooks/usePagination"
import { useUserStore } from "@/store/modules/user"
import { getComboDataApi10 } from "@/api/combo"
import { workOrderUpdateApi, workOrderQueryApi } from "@/api/complaint"
import { useTeamStore } from "@/store/modules/team"
import { shortcuts } from "@/utils/dateSet"

defineOptions({
  name: "WorkOrderTwo"
})
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()

// #region
const TeamListArr = ref()
const teamStore = useTeamStore()
teamStore.getTeamFn()
watch(
  [() => teamStore.teamListStore],
  (newValue) => {
    TeamListArr.value = newValue.flat()
  },
  {
    immediate: true
  }
)
// #endregion

// #region 搜索内容
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive<any>({
  time: "",
  orderId: "",
  team: "",
  packageId: "",
  status: ""
})
const defaultTime1: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 0)]
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getTableData()
    console.log("重置")
  }
  paginationData.currentPage = 1
}
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    getTableData()
    console.log("查询")
  }
  paginationData.currentPage = 1
}
// #endregion

//  #region 查看所有工单
const tableData = ref<any>([])
const userStore = useUserStore()
const getTableData = async () => {
  if (!searchData.time) {
    searchData.time = []
  }
  await workOrderQueryApi({
    start: new Date(searchData.time[0]).getTime() || "",
    end: new Date(searchData.time[1]).getTime() || "",
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    state: "1",
    team: userStore.teamName,
    GSteam: searchData.team || "", // 归属团队
    packageId: searchData.packageId,
    department: userStore.department,
    orderId: searchData.orderId || ""
  }).then((res: any) => {
    tableData.value = res.data.list
    paginationData.total = res.data.total
    console.log(res, "获取所有工单")
  })
}

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
// #endregion

// #region 系统对应套餐
const comboList = ref<any>([])
const taocan = () => [
  getComboDataApi10({
    page: 1,
    size: 10000,
    state: "",
    team: ""
  }).then((res: any) => {
    comboList.value = res.data
    console.log(res.data.packageList, "taocan")
  })
]
taocan()
const formatterCombo = (row: any, column: any, celValue: any) => {
  comboList.value.filter((item: any) => {
    if (item.id == row.packageId) {
      celValue = item.name
    }
  })
  return celValue
}
// #endregion

// #region 同意 修改状态
const dialogVisibleA = ref(false) // 打开详情框
const formWorkOrder = reactive<any>({ data: {} }) // 回显示赋值
const ruleFormRef = ref<FormInstance>()
const handleUpdate = (row: any) => {
  console.log(row, "同意")
  dialogVisibleA.value = true
  formWorkOrder.data = row
  if (row.kimage == "" || row.kimage == "111") {
    formWorkOrder.data.kimage = "111"
  } else {
    formWorkOrder.data.kimage =
      row.kimage.charAt(row.kimage.length - 1) === "," ? row.kimage.split(",").slice(0, -1) : row.kimage.split(",")
  }
}
const clearValidateA = () => {
  ruleFormRef.value?.resetFields()
}
const resetFormA = () => {
  ruleFormRef.value?.resetFields()
  // 清空reactive对象里面的key值
  Object.keys(formWorkOrder.data).map((key) => {
    delete formWorkOrder[key]
  })
  clearValidateA()
}
const FormRulesYZ = reactive<FormRules>({
  // Kpromise: [{ required: true, trigger: "change", message: "是否违规承诺" }]
})
// #endregion

// #region 提交按钮
const onSubmit = (formEl: any) => {
  if (!formEl) return
  formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      // 修改状态
      workOrderUpdateApi({
        id: formWorkOrder.data.id,
        shopManager: userStore.nickName,
        shopManagerTest: formWorkOrder.data.shopManagerTest,
        state: "2"
      }).then((res) => {
        console.log(res, 66666666)
        dialogVisibleA.value = false
        ElMessage.success("提交成功")
        getTableData()
      })
    } else {
      console.log("error submit!", fields)
    }
  })
}
const noSubmit = () => {
  // 修改状态
  workOrderUpdateApi({
    id: formWorkOrder.data.id,
    shopManager: userStore.nickName,
    shopManagerTest: formWorkOrder.data.shopManagerTest,
    state: "5"
  }).then((res) => {
    console.log(res, "驳回")
    dialogVisibleA.value = false
    ElMessage.success("驳回成功")
    getTableData()
  })
}
// #endregion
// const srcList = [
//   "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
//   "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
//   "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
//   "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
//   "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
//   "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
//   "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg"
// ]

// start 开始时间  end 结束时间   id 订单id   team  团队 department 部门  page 页码 size 页容量  state 状态
</script>

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="time" label="订单日期">
          <el-date-picker
            v-model="searchData.time"
            type="datetimerange"
            range-separator="到"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            :default-time="defaultTime1"
          />
        </el-form-item>
        <el-form-item prop="orderId" label="订单外部ID">
          <el-input v-model.trim="searchData.orderId" clearable placeholder="请输入" style="width: 240px" />
        </el-form-item>
        <el-form-item prop="packageId" label="套餐">
          <el-select v-model="searchData.packageId" clearable filterable placeholder="请选套餐" style="width: 240px">
            <el-option v-for="item in comboList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item prop="team" label="店铺名称">
          <el-select v-model="searchData.team" clearable filterable placeholder="请选择店铺名称">
            <el-option v-for="item in TeamListArr" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 渲染 -->
    <el-card shadow="never">
      <div class="table-wrapper">
        <el-table :data="tableData" ref="tableRef">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="orderId" label="订单外部ID" align="center" />
          <el-table-column prop="shopName" label="店铺名称" align="center" />
          <el-table-column label="投诉订单创建时间" align="center">
            <template #default="scope">
              {{ formatDateTime(scope.row.time) }}
            </template>
          </el-table-column>
          <el-table-column prop="packageId" label="套餐" :formatter="formatterCombo" align="center" />
          <!-- <el-table-column prop="contact" label="联系人" align="center" /> -->
          <el-table-column prop="dispose" label="处理人" align="center" />
          <el-table-column prop="type" label="纠纷单类型" />
          <el-table-column fixed="right" label="操作" width="100" align="center">
            <template #default="scope">
              <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 显示详情，并选择同意还是拒绝 -->
    <el-dialog v-model="dialogVisibleA" width="50%" @closed="resetFormA">
      <el-scrollbar height="600px">
        <el-form :rules="FormRulesYZ" ref="ruleFormRef" :model="formWorkOrder" label-width="120px" scroll-to-error>
          <!-- 四个框 -->
          <table border="1" cellspacing="0" width="100%" height="100">
            <tr class="tableTr">
              <th style="width: 230px">
                <el-form-item label-width="0px">
                  <el-text class="mx-1">{{ "店铺名称：" }}</el-text>
                  <el-text class="mx-1">{{ formWorkOrder.data.shopName }}</el-text>
                </el-form-item>
              </th>
              <th style="width: 230px">
                <el-form-item label-width="0px">
                  <el-text class="mx-1">{{ "订单外部ID：" }}</el-text>
                  <el-text class="mx-1">{{ formWorkOrder.data.orderId }}</el-text>
                </el-form-item>
              </th>
              <th style="width: 230px">
                <el-form-item label-width="0px">
                  {{ "套餐名称：" }}
                  <template v-for="item in comboList" :key="item.id">
                    <el-text size="small" v-if="item.id == formWorkOrder.data.packageId"> {{ item.name }}</el-text>
                  </template>
                </el-form-item>
              </th>
              <th style="width: 230px">
                <el-form-item label-width="0px">
                  <el-text class="mx-1">{{ "投诉时间：" }}</el-text>
                  <el-text class="mx-1">{{ formatDateTime(formWorkOrder.data.time) }}</el-text>
                </el-form-item>
              </th>
            </tr>
          </table>
          <!-- 三个框 -->
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <!-- 违规----- -->
            <tr class="tableTr" height="50">
              <td>是否违规承诺</td>
              <td>是否虚假宣传</td>
              <td>详情图是否有歧义</td>
            </tr>
            <tr class="tableTr">
              <td>
                <div class="centerSelect">
                  <el-form-item prop="kpromise" label-width="0px" :rules="FormRulesYZ.Kpromise">
                    <el-select v-model="formWorkOrder.data.kpromise" disabled>
                      <el-option label="是" value="是" />
                      <el-option label="否" value="否" />
                    </el-select>
                  </el-form-item>
                </div>
              </td>
              <td>
                <div class="centerSelect">
                  <el-form-item prop="publicity" label-width="0px" :rules="FormRulesYZ.publicity">
                    <el-select v-model="formWorkOrder.data.publicity" disabled>
                      <el-option label="是" value="是" />
                      <el-option label="否" value="否" />
                    </el-select>
                  </el-form-item>
                </div>
              </td>
              <td>
                <div class="centerSelect">
                  <el-form-item prop="ambiguity" label-width="0px" :rules="FormRulesYZ.ambiguity">
                    <el-select v-model="formWorkOrder.data.ambiguity" disabled>
                      <el-option label="是" value="是" />
                      <el-option label="否" value="否" />
                    </el-select>
                  </el-form-item>
                </div>
              </td>
            </tr>
            <!-- 售前---- -->
            <tr class="tableTr" height="50">
              <td>售前接待记录</td>
              <td>售后接待记录</td>
              <td>客户是否满意</td>
            </tr>
            <tr class="tableTr">
              <td>
                <div class="centerSelect">
                  <el-form-item prop="preSales" label-width="0px" :rules="FormRulesYZ.preSales">
                    <el-select v-model="formWorkOrder.data.preSales" disabled>
                      <el-option label="有" value="有" />
                      <el-option label="无" value="无" />
                    </el-select>
                  </el-form-item>
                </div>
              </td>
              <td>
                <div class="centerSelect">
                  <el-form-item prop="afterSale" label-width="0px" :rules="FormRulesYZ.afterSale">
                    <el-select v-model="formWorkOrder.data.afterSale" disabled>
                      <el-option label="有" value="有" />
                      <el-option label="无" value="无" />
                    </el-select>
                  </el-form-item>
                </div>
              </td>
              <td>
                <div class="centerSelect">
                  <el-form-item prop="satisfaction" label-width="0px" :rules="FormRulesYZ.satisfaction">
                    <el-select v-model="formWorkOrder.data.satisfaction" disabled>
                      <el-option label="满意" value="满意" />
                      <el-option label="不满意" value="不满意" />
                    </el-select>
                  </el-form-item>
                </div>
              </td>
            </tr>
          </table>
          <!-- 一个框 -->
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <tr>
              <td>
                <div>
                  <el-form-item label-width="0px">
                    <el-text class="mx-1">{{ "投诉内容：" }}</el-text>
                    <el-text class="mx-1">{{ formWorkOrder.data.cause }}</el-text>
                  </el-form-item>
                  <!-- <span>投诉内容</span>
                  <el-form-item prop="cause" label-width="0px">
                    <el-input
                      v-model="formWorkOrder.data.cause"
                      disabled
                      type="textarea"
                      resize="none"
                      style="white-space: pre-line"
                    />
                  </el-form-item> -->
                </div>
              </td>
            </tr>
          </table>
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <tr>
              <td>
                <div>
                  <span>投诉原因</span>
                  <el-form-item prop="reason" label-width="0px">
                    <el-input
                      v-model="formWorkOrder.data.reason"
                      disabled
                      type="textarea"
                      resize="none"
                      style="white-space: pre-line"
                    />
                  </el-form-item>
                </div>
              </td>
            </tr>
          </table>
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <tr>
              <td>
                <div>
                  <span>处理结果</span>
                  <el-form-item prop="result" label-width="0px" :rules="FormRulesYZ.result">
                    <el-input
                      disabled
                      v-model="formWorkOrder.data.result"
                      type="textarea"
                      resize="none"
                      style="white-space: pre-line"
                    />
                  </el-form-item>
                </div>
              </td>
            </tr>
          </table>
          <!-- 二个框 -->
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <tr>
              <td>
                <div>
                  <span>自我检查</span>
                  <el-form-item prop="examine" label-width="0px" :rules="FormRulesYZ.examine">
                    <el-input
                      disabled
                      v-model="formWorkOrder.data.examine"
                      type="textarea"
                      resize="none"
                      style="white-space: pre-line"
                    />
                  </el-form-item>
                </div>
              </td>
              <td>
                <div>
                  <span>后期规避</span>
                  <el-form-item prop="evade" label-width="0px" :rules="FormRulesYZ.evade">
                    <el-input
                      disabled
                      v-model="formWorkOrder.data.evade"
                      type="textarea"
                      resize="none"
                      style="white-space: pre-line"
                    />
                  </el-form-item>
                </div>
              </td>
            </tr>
          </table>
          <!-- 三个框 -->
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <tr>
              <td>
                <div>
                  <el-text class="mx-1">{{ "责任人：" }}</el-text>
                  <el-form-item prop="duty" label-width="0px" :rules="FormRulesYZ.duty">
                    <el-input v-model="formWorkOrder.data.duty" disabled />
                  </el-form-item>
                </div>
              </td>
              <td>
                <div>
                  <el-text class="mx-1">{{ "接待人：" }}</el-text>
                  <el-form-item prop="reception" label-width="0px" :rules="FormRulesYZ.reception">
                    <el-input v-model="formWorkOrder.data.reception" disabled />
                  </el-form-item>
                </div>
              </td>
              <td>
                <div>
                  <el-text class="mx-1">{{ "处理人：" }}</el-text>
                  <el-form-item prop="dispose" label-width="0px" :rules="FormRulesYZ.dispose">
                    <el-input v-model="formWorkOrder.data.dispose" disabled />
                  </el-form-item>
                </div>
              </td>
            </tr>
          </table>
          <!-- 二个框 -->
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <tr>
              <td>
                <div>
                  <el-text class="mx-1">{{ "店长：" }}</el-text>
                  <el-form-item prop="shopManager" label-width="0px" :rules="FormRulesYZ.shopManager">
                    <el-input v-model="formWorkOrder.data.shopManager" disabled />
                  </el-form-item>
                </div>
              </td>
              <td>
                <div>
                  <el-text class="mx-1">{{ "运营：" }}</el-text>
                  <el-form-item prop="operation" label-width="0px" :rules="FormRulesYZ.operation">
                    <el-input v-model="formWorkOrder.data.operation" disabled />
                  </el-form-item>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div>
                  <el-text class="mx-1">{{ "部门经理：" }}</el-text>
                  <el-form-item prop="manager" label-width="0px" :rules="FormRulesYZ.manager">
                    <el-input v-model="formWorkOrder.data.manager" disabled />
                  </el-form-item>
                </div>
              </td>
              <td>
                <div>
                  <el-text class="mx-1">{{ "公司售后：" }}</el-text>
                  <el-form-item prop="company" label-width="0px" :rules="FormRulesYZ.company">
                    <el-input v-model="formWorkOrder.data.company" disabled />
                  </el-form-item>
                </div>
              </td>
            </tr>
          </table>

          <el-form-item
            prop="image"
            label="反馈图片"
            style="margin-top: 20px"
            v-if="formWorkOrder.data.kimage !== '111'"
          >
            <el-image
              style="width: 100px; height: 100px"
              v-for="(item, index) in formWorkOrder.data.kimage"
              :preview-src-list="[item]"
              :key="index"
              :src="item"
              :zoom-rate="1.2"
              fit="cover"
            />
          </el-form-item>

          <el-form-item
            label="店长意见"
            prop="shopManagerTest"
            :rules="formWorkOrder.data.shopManagerTest"
            style="margin-top: 10px"
          >
            <el-input
              v-model="formWorkOrder.data.shopManagerTest"
              type="textarea"
              resize="none"
              style="white-space: pre-line"
            />
          </el-form-item>
          <el-form-item label="驳回原因" prop="spReason" :rules="formWorkOrder.data.spReason" style="margin-top: 10px">
            <el-input
              disabled
              v-model="formWorkOrder.data.spReason"
              type="textarea"
              resize="none"
              style="white-space: pre-line"
            />
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <el-form-item class="addbuttons">
        <el-button type="primary" @click="onSubmit(ruleFormRef)">同意</el-button>
        <el-button @click="noSubmit">驳回</el-button>
      </el-form-item>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
}
.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.table-center {
  margin-bottom: 20px;
}
.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.tableTb {
  border-top: 0;
}

.tableTr {
  text-align: center;
}
.centerSelect {
  display: flex;
  align-items: center;
  justify-content: center;
}
.addbuttons {
  margin-left: 45%;
}
.pager-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
